Un menu intelligente
Tutorial scritto il 23/06/03  da Luca Ruggiero
Sito Web: http://www.lukeonweb.net  

Premessa: In questo tutorial vedremo passo passo come realizzare un menu intelligente con Javascript. La particolarità di questo menu consiste nell'evidenziare automaticamente la voce di menu corrispondente alla pagina che si sta visualizzando. Vediamo come con l'aiuto del nostro esperto: Luca Ruggiero.
Quindi a te la palla Luca...

Ok. Facciamo un attimo il punto della situazione e rendiamoci conto di cosa abbiamo bisogno, e perchè.
Ipotizziamo di avere un menu che punti a tutte le principali sezioni del nostro sito; per creare un esempio semplice e snello ipotizzo di avere i link alla homepage, alla pagina dei contatti ed a quella del forum.

Creiamo quindi questi file: 
- homepage.html 
- forum.html 
- email.html

In tutte queste pagine andremo ad includere il file "menu.js" in cui costruiremo fisicamente il menu. Così:


<script language="javascript" src="menu.js"></script>


Utilizzeremo come parametro di identificazione della pagina corrente il nome del file, reperendolo all'interno della barra degli indirizzi del browser.
Se la condizione si verifica, cioè se la stringa "nomefile.estensione" viene trovata, evidenzieremo la voce del menu di riferimento in grassetto (o con qualsiasi altra stilizzazione a gusto dello sviluppatore), altrimenti la mostreremo con lo stesso stile delle altre voci di menu non corrispondenti alla pagina corrente.

Posso assicurarvi che è un'applicazione molto più lunga a dirsi che a farsi! 
Vediamo quindi il codice opportunamente commentato che compone il menu, all'interno del file "menu.js":


// Inizializzo la variabile identificativa dell'indirizzo della pagina corrente
var QUESTA_PAGINA = document.URL;

document.write("<div>");

if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))
{
// Stampo a video la voce della pagina NON corrente
document.write(":: <a href='homepage.html'>homepage</a>");
}
else
{
// Stampo a video la voce della pagina corrente evidenziata in grassetto
document.write(":: <a href='homepage.html'><b>homepage</b></a>");
}

document.write("<br>");

if (QUESTA_PAGINA.indexOf("forum.html") == (-1))
{
document.write(":: <a href='forum.html'>forum</a>");
}
else
{
document.write(":: <a href='forum.html'><b>forum</b></a>");
}

document.write("<br>");

if (QUESTA_PAGINA.indexOf("email.html") == (-1))
{
document.write(":: <a href='email.html'>email</a>");
}
else
{
document.write(":: <a href='email.html'><b>email</a></b>");
}

document.write("</div>");


Prendiamo adesso la parte principale del codice dello script, quella che setta la condizione per la verifica della pagina corrente:


if (QUESTA_PAGINA.indexOf("homepage.html") == (-1))


Il metodo di tipo String indexOf() effettua la ricerca della stringa specificata tra parentesi e doppi apici; settiamo l'uguaglianza sul valore -1 nel caso in cui la pagina non sia quella corrente e non vada quindi evidenziata in grassetto.


  
 
Iscriviti allo scambio banner di BannerGratis.it 
 
 
    
 
 
 
         
 
 
 
 
 
 
 
 
 
ByLuciani
DiTuttoGratis
GraficiDentro
FattiTrovare
Ioloso.it
Lukeonweb.net
Mooseek
Trucchi per Pc
Tuttogratis
 
 
  
 
 
Mr. WebMaster è un sito BubuNET - Housing solution powerd by OMNIbit
Network: DiscotequeOnLine | BubuDRIN | GiochiCellulare | Mr. Webmaster | BannerGratis